<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>相册列表</title>
    <!-- 公共 -->
    <script type="text/javascript" charset="utf-8" src="/common/js/framework.js"></script>
    <script type="text/javascript" charset="utf-8" src="/common/js/navbar.js"></script>
    <link href="css/fileIndex.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" charset="utf-8" src="js/fileIndex.js"></script>

</head>
<body>
<div id="fileListId">

    <el-container style="height: 500px; border: 1px solid #eee">
        <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
            <el-menu :default-openeds="['1', '3']">
                <el-submenu index="1">
                    <template slot="title"><i class="el-icon-document-copy"></i>我的文件</template>
                    <el-menu-item-group>
                        <el-menu-item index="1-1" @click="selectFileByFileType(1)">图片</el-menu-item>
                        <el-menu-item index="1-2" @click="selectFileByFileType(2)">文档</el-menu-item>
                        <el-menu-item index="1-3" @click="selectFileByFileType(3)">视频</el-menu-item>
                        <el-menu-item index="1-4" @click="selectFileByFileType(4)">音乐</el-menu-item>
                        <el-menu-item index="1-5">其他</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>

            </el-menu>
        </el-aside>
        <el-container>
                <el-main>
                    <div>
                        <a class="layui-btn layui-btn-normal" id="uploadFileId"><i class="layui-icon"></i>上传文件</a>
                        <a id="createFile" onclick="addFolderWindow()" class="layui-btn layui-btn-normal">新建文件夹</a>
                        <div class="storeDisWrapper" style="float:right;">已使用<span id="storageid"></span>M容量</div>
                    </div>


                    <el-breadcrumb separator="/">
                        <el-breadcrumb-item v-for="(item, index) in breadCrumbList" :key="index"><a :href="item.breadPath">{{item.breadName}}</a></el-breadcrumb-item>
                    </el-breadcrumb>

                    <el-table
                            ref="multipleTable"
                            :data="fileList"
                            tooltip-effect="dark"
                            style="width: 1000px !important;"
                            >
                        <el-table-column
                                type="selection"
                                width="55">
                        </el-table-column>
                        <el-table-column
                                label="文件名"
                                width="240">
                            <template slot-scope="scope">
                                <a @click="clickFileName(scope.$index, scope.row)">
                                    <img v-bind:src="scope.row.imageurl" onerror="this.src='image/file_unknown.png'"
                                        style="max-width: 30px;">
                                    {{scope.row.filename}}.{{scope.row.extendname}}</a>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="大小"
                                width="200">
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.filesize==0?'-':
                                    (scope.row.filesize/1024 < 1024 ? (scope.row.filesize/1024).toFixed(0) + 'KB':
                                    (scope.row.filesize/1024/1024 <1024 ? (scope.row.filesize/1024/1024).toFixed(1) + 'MB' :
                                    (scope.row.filesize/1024/1024/1024 <1024 ? (scope.row.filesize/1024/1024/1024).toFixed(2) + 'GB' :
                                    (scope.row.filesize/1024/1024/1024).toFixed(3) + 'TB'))) }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="uploadtime"
                                label="修改日期"
                                show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-dropdown trigger="click">
                                      <el-button size="mini">
                                        操作<i class="el-icon-arrow-down el-icon--right"></i>
                                      </el-button>
                                    <el-dropdown-menu slot="dropdown">
                                        <el-dropdown-item @click.native="moveFile(scope.row)">移动到</el-dropdown-item>
                                        <el-dropdown-item v-if="scope.row.extendname=='zip'" @click.native="unzipFile(scope.row)">解压缩</el-dropdown-item>
                                        <el-dropdown-item v-if="scope.row.isdir==0" @click.native="showFile(scope.row)">查看</el-dropdown-item>
                                        <el-dropdown-item v-if="scope.row.isdir==0" @click.native="downloadFile(scope.row)">下载</el-dropdown-item>
                                    </el-dropdown-menu>
                                </el-dropdown>
                                <el-button
                                        size="mini"
                                        type="danger"
                                        @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                            </template>

                        </el-table-column>
                    </el-table>

                </el-main>

        </el-container>
    </el-container>



</div>
</body>
</html>